<template>
  <div class="order-stat-page">
    <el-row
      type="flex"
      :gutter="20"
    >
      <el-col :span="10">
        <OrderStat :Data="StaticData"/>
      </el-col>
      <el-col :span="14">
        <SuccessOrderStat :Data="StaticData" />
      </el-col>
    </el-row>
    <Overdue :Data="StaticData.OverdueT7" :day="7" />
    <Overdue :Data="StaticData.OverdueT30" :day="30" />
    <Overdue :Data="StaticData.OverdueT90" :day="90" />
  </div>
</template>

<script setup>
import {getorderBoard} from '@/api/data'
import { ref } from 'vue'
import { defineAsyncComponent } from 'vue'
defineOptions({
  name: 'OrderBoard',
})
const StaticData = ref({
});

// 引入组件
const OrderStat = defineAsyncComponent(() =>
  import('./components/orderStat.vue')
)
const SuccessOrderStat = defineAsyncComponent(() =>
  import('./components/successOrderStat.vue')
)
const Overdue = defineAsyncComponent(() => import('./components/overdue.vue'))
const getDataInfo = async () => {
  const res = await getorderBoard()
  if (res.code === 0) {
    StaticData.value = res.data
  }
}
getDataInfo();
</script>

  <style lang="scss" scoped></style>
